<template>
	<div class="xlNavBar">
		<div class="content" :style="{
        paddingTop: systemBarHeight + 'px',
        height: navHeight + 8 + 'px',
        lineHeight: navHeight + 8 + 'px',
        backgroundImage: bgi && 'url(' + bgi + ')',
        backgroundColor: bgc == 'transparent' ? 'transparent' : '#' + bgc,
      }">
			<div class="home_select_address" :style="{ top: systemBarHeight - 3 + 'px' }"
				@click="$emit('selectAddress')" v-if="showLeft && showSelectAddress">
				<text class="iconfont cyweizhi"></text>
				<text class="text">{{ addressText }}</text>
				<text class="iconfont cyxiajiantou"></text>
			</div>
			<div v-else>
				<view class="iconfont_wrap gohome" @click="goHome" v-if="showLeft && isShare">
					<text class="iconfont cyshouye" :style="{ color }"></text>
				</view>
				<view class="iconfont_wrap" @click="goBack" v-if="showLeft && !isShare">
					<text class="iconfont cyfanhuijiantou" :style="{ color }"></text>
					<text class="desc" :style="{ color }">{{ desc }}</text>
				</view>
			</div>

			<view class="title" :style="{ color }">
				<div class="wrap">
					<span>{{ pageTitle }}</span>
					<i class="iconfont cyjiantou_zuoyouqiehuan" v-if="showCheck" @click="checkModel"></i>
					<div class="tips" v-if="showLocationTips && showCheck">
						<span>点击可切换{{ title == "找工作" ? "招员工" : "找工作" }}模式</span>
						<i class="iconfont cyguanbixiao" @click="clickIconFont"></i>
					</div>
				</div>
			</view>
		</div>
		<div class="mark" v-if="isMark" :style="{ height: navHeight + 8 + systemBarHeight + 'px' }"></div>
	</div>
</template>

<script>
	export default {
		name: "xlNavBar",
		props: {
			isMark: {
				type: Boolean,
				default: true,
			},
			showCheck: {
				type: Boolean,
				default: false,
			},
			showSelectAddress: {
				type: Boolean,
				default: false,
			},
			addressText: {
				type: String,
				default: "",
			},
			desc: {
				type: String,
				default: "",
			},
			title: {
				type: String,
				default: "",
			},
			bgi: {
				type: String,
				default: "",
			},
			bgc: {
				type: String,
				default: "#fff",
			},
			color: {
				type: String,
				default: "#fff",
			},
			showLeft: {
				type: Boolean,
				default: true,
			},
			isShare: {
				type: Boolean || Number || String,
				default: false,
			},
			customJump:{
				type: Function
			}
		},
		data() {
			return {
				// 系统栏高度
				systemBarHeight: "",
				// 胶囊高度
				//#ifdef MP-WEIXIN
				navHeight: "",
				//#endif
				//#ifdef H5 
				navHeight: 44,
				//#endif
				//#ifdef  APP-PLUS
				navHeight: 60,
				//#endif
				showLocationTips: true,
			};
		},
		computed: {
			pageTitle() {
				if (this.title) {
					return this.title;
				} else {
					return this.$pages.getPageTitle();
				}
			},
		},
		created() {
			if (this.$getStoraged("isCloseFindTip").length) {
				this.showLocationTips = !this.$getStoraged("isCloseFindTip");
			}

			this.getSysteminfo();
		},
		methods: {
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						//#ifdef MP-WEIXIN
						console.log(res, uni.getMenuButtonBoundingClientRect());
						this.systemBarHeight = res.statusBarHeight;
						this.navHeight = uni.getMenuButtonBoundingClientRect().height;
						//#endif
					},
				});
			},
			goBack() {
				this.$throttle(() => {
					if (this.customJump) {
						this.customJump();
						return;
					}
					//#ifdef MP-WEIXIN
					let pageList = getCurrentPages();
					pageList.length > 1 ? this.$back() : this.$jump("/pages/index");
					//#endif
				}, 300);
			},
			goHome() {
				this.$throttle(() => {
					console.log(1);
					this.$redirectTo("/pagesHome/index");
				});
			},
			clickIconFont() {
				this.$throttle(() => {
					this.$setStoraged("isCloseFindTip", true);
					this.showLocationTips = false;
				});
			},
			checkModel() {
				this.$throttle(() => {
					this.$emit("checkModel");
				}, 300);
			},
		},
		watch: {},
		// 组件周期函数--监听组件挂载完毕
		mounted() {},
		// 组件周期函数--监听组件数据更新之前
		beforeUpdate() {},
		// 组件周期函数--监听组件数据更新之后
		updated() {},
		// 组件周期函数--监听组件激活(显示)
		activated() {},
		// 组件周期函数--监听组件停用(隐藏)
		deactivated() {},
		// 组件周期函数--监听组件销毁之前
		beforeDestroy() {},
	};
</script>

<style scoped lang="scss">
	.xlNavBar {
		width: 100vw;

		.mark {
			width: 100%;
			height: 100%;
		}

		.home_select_address {
			position: absolute;
			top: 18px;
			font-size: 14px;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #ffffff;
			display: flex;
			align-items: center;
			width: 80px;

			.cyweizhi {
				margin-left: 10px;
				margin-right: 2px;
				font-size: 12px;
				transform: scale(0.9);
				flex-shrink: 0;
				// margin-right: 2px;
			}

			.text {
				max-width: 60px;
				display: inline-block;
				margin: 2px auto 5px;
				flex-shrink: 0;
				@include ells(1);
			}

			.cyxiajiantou {
				margin-left: 5px;
				font-size: 12px;
				transform: scale(0.8);
				flex-shrink: 0;
			}
		}

		.content {
			position: fixed;
			width: 100%;
			height: 100%;
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
			z-index: 9999999;

			.iconfont_wrap {
				position: absolute;
				left: 16px;

				.desc {
					margin-left: 4px;
				}
			}

			.gohome {
				width: 30px;

				.cyshouye {
					font-size: 22px;
				}
			}

			.title {
				display: flex;
				justify-content: space-around;
				width: 100%;
				text-align: center;

				.wrap {
					position: relative;
					display: flex;

					span {
						display: block;
						margin-left: 50px;
					}

					.iconfont {
						margin-left: 10px;
					}

					.tips {
						position: absolute;
						width: 190px;
						height: 30px;
						line-height: 20px;
						background: #03030390;
						top: 50px;
						right: -122px;
						border-radius: 8px;
						box-sizing: border-box;
						font-size: 12px;
						display: flex;
						padding: 5px;
						box-sizing: border-box;

						&::after {
							content: "";
							position: absolute;
							top: -8px;
							left: 50px;
							width: 0px;
							height: 0px;
							border-left: 8px solid transparent;
							border-right: 8px solid transparent;
							border-bottom: 8px solid #03030390;
						}

						._span {
							display: block;
							width: 70%;
							text-align: center;
							margin-left: 10px;
						}

						.iconfont {
							color: #828282;
						}
					}
				}
			}
		}
	}
</style>